import React, { useEffect, useState } from "react";
import s from './style.module.less';
import { FilePicker, Button, Input, Toast } from "zarm";
import axios from 'axios';
import { get, post } from '@/utils';
import { baseUrl } from 'config';
import Header from '@/components/Header';
import { useNavigate } from "react-router-dom";
import { imgUrlTrans } from "../../utils";

const UserInfo = () => {
    const navigateTo = useNavigate();
    const [user, setUser] = useState({});
    const [avatar, setAvatar] = useState('');
    const [signature, setSignature] = useState('');
    const token = localStorage.getItem('token');

    useEffect(() => {
        getUserInfo();
    },[])

    const getUserInfo = async () => {
        const { data } = await get('/api/user/getUserInfo');
        setUser(data);
        setAvatar(imgUrlTrans(data.avatar));
        setSignature(data.signature);
    }

    const handleSelect = (file) => {
        console.log(file);
        if (file && file.file.size > 2000 * 1024) {
            Toast.show('上传头像不得超过2MB!');
            return
        }
        let formData = new FormData();
        formData.append('file',file.file);

        axios({
            method:'POST',
            url: `${baseUrl}api/upload`,
            data: formData,
            headers: {
                'Content-Type': 'multipart/form-data',
                'Authorization': token
            }
        }).then(res => {
            console.log(res);
            setAvatar(imgUrlTrans(res.data));
        })

        
    }

    const save = async () => {
        const {data} = await post('/api/user/editUserInfo',{
            signature,
            avatar
        });

        Toast.show('修改成功！');
        navigateTo(-1);
    }

    return <>
        <Header title={'用户信息'}/>
        <div className={s.userinfo}>
            <h1>个人资料</h1>
            <div className={s.item}>
                <div className={s.title}>头像</div>
                <div className={s.avatar}>
                    <img src={avatar} className={s.avatarUrl} alt=""/>
                    <div className={s.desc}>
                        <span>支持 jpg、png、jpeg 格式大小 200KB 以内的图片</span>
                        <FilePicker className={s.filePicker} onChange={handleSelect} accept="image/*">
                            <Button className={s.upload} theme='primary' size='xs'>点击上传</Button>
                        </FilePicker>
                    </div>
                </div>
            </div>
            <div className={s.item}>
                <div className={s.title}>个性签名</div>
                <div className={s.signature}>
                    <Input
                        clearable
                        type="text"
                        value={signature}
                        placeholder="请输入个性签名"
                        onChange={(e) => setSignature(e.target.value)}
                    />
                </div>
            </div>
            <Button onClick={save} theme="primary" block style={{marginTop:50}}>保存</Button>
        </div>
    </>
}

export default UserInfo